<template>
  <div>
    <el-container class="layout-container-demo" style="height: 500px">
      <el-aside width="180px">
        <el-scrollbar>
          <el-menu style="background:#efefef;">
          <el-sub-menu class="title" index="0">
              <template #title>
                MALL4J建站后台
              </template>
            </el-sub-menu>
            <el-sub-menu index="1">
              <template #title>
                <router-link to="/home">
                  <el-icon>
                    <message />
                  </el-icon>首页
                </router-link>
              </template>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <icon-menu />
                </el-icon>产品管理
              </template>
              <el-menu-item-group style="background: #efefef;">
                <router-link to="/product">
                  <el-menu-item index="2-1">产品管理</el-menu-item>
                </router-link>
                <router-link to="/classification">
                  <el-menu-item index="2-2">分类管理</el-menu-item>
                </router-link>
                <router-link to="/grouping">
                  <el-menu-item index="2-3">分组管理</el-menu-item>
                </router-link>
                <router-link to="/comment">
                  <el-menu-item index="2-4">评论管理</el-menu-item>
                </router-link>
                <router-link to="/Specifications">
                  <el-menu-item index="2-5">规格管理</el-menu-item>
                </router-link>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <setting />
                </el-icon>门店管理
              </template>
              <el-menu-item-group>
                <router-link to="/store">
                  <el-menu-item index="3-1">公告管理</el-menu-item>
                </router-link>
                <router-link to="/delivery">
                  <el-menu-item index="3-2">自提点管理</el-menu-item>
                </router-link>
                <router-link to="/freight">
                  <el-menu-item index="3-3">运费模板</el-menu-item>
                </router-link>
                <router-link to="/Rotation">
                  <el-menu-item index="3-4">轮播图管理</el-menu-item>
                </router-link>
                <router-link to="/search">
                  <el-menu-item index="3-5">热搜管理</el-menu-item>
                </router-link>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <setting />
                </el-icon>会员管理
              </template>
              <el-menu-item-group>
                <router-link to="/member">
                  <el-menu-item index="4-1">会员管理</el-menu-item>
                </router-link>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <setting />
                </el-icon>订单管理
              </template>
              <el-menu-item-group>
                <router-link to="/order">
                  <el-menu-item index="5-1">订单管理</el-menu-item>
                </router-link>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <setting />
                </el-icon>系统管理
              </template>
              <el-menu-item-group>
                <router-link to="/address">
                  <el-menu-item index="6-1">地址管理</el-menu-item>
                </router-link>
                <router-link to="/administrators">
                  <el-menu-item index="6-2">管理员列表</el-menu-item>
                </router-link>
                <router-link to="/role">
                  <el-menu-item index="6-3">角色管理</el-menu-item>
                </router-link>
                <router-link to="/menu">
                  <el-menu-item index="6-4">菜单管理</el-menu-item>
                </router-link>
                <router-link to="/timing">
                  <el-menu-item index="6-5">定时任务</el-menu-item>
                </router-link>
                <router-link to="/parameter">
                  <el-menu-item index="6-6">参数管路</el-menu-item>
                </router-link>
                <router-link to="/system">
                  <el-menu-item index="6-7">系统日志</el-menu-item>
                </router-link>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <div class="toolbar">
            <el-dropdown>
              <el-icon style="margin-right: 8px; margin-top: 1px">
                <setting />
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>View</el-dropdown-item>
                  <el-dropdown-item>Add</el-dropdown-item>
                  <el-dropdown-item>Delete</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span>Tom</span>
          </div>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref } from "vue";
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
</script>

<style scoped>
a {
    color: #1b1b1b;
    text-decoration: none;
}

.title{
    background: rgb(14, 156, 238);
}

.layout-container-demo .el-header {
  position: relative;
  background-color: #e6e8eb;
  color: #1b1b1b;
}
.layout-container-demo .el-aside {
  color: #1b1b1b;
  background: #efefef;
  height: 100vh;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
